<template>
  <page-header-wrapper>
    <a-card class="body">
      <div class="head">
        <a-radio-group v-model:value="vdata.searchData['type']" style="margin-bottom: 16px" button-style="solid">
          <a-radio-button value="0">全部</a-radio-button>
          <a-radio-button value="1">抽奖</a-radio-button>
          <a-radio-button value="2">签到</a-radio-button>
          <a-radio-button value="3">助力</a-radio-button>
          <a-radio-button value="4">点赞</a-radio-button>
          <a-radio-button value="5">派券</a-radio-button>
        </a-radio-group>

        <a-input-search
          v-model:value="vdata.searchData['content']"
          style="width: 20%;"
          placeholder="请输入模板名称搜索"
          enter-button
          @search="onSearch"
        />
      </div>
      <a-divider orientation="left">Normal</a-divider>
      <a-row :gutter="[40,32]">
        <a-col v-for="(item,index) in [0,1,2]" :key="index" :span="6">
          <a-card hoverable :headStyle="{padding:10}">
            <template #cover>
              <img alt="example" src="./banner.png">
            </template>
            <a-card-meta title="盲盒抽奖" style="margin:20px">
              <template #descriptions>proxy.jdyd.xyz</template>
            </a-card-meta>
            <template #actions>
              <span @click="onTry('')">试用</span>
              <span @click="onShow('')">创建</span>
            </template>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <a-modal
      v-model:visible="vdata.tryDialogVisible"
      title="活动试用二维码"
      centered
      :footer="null"
      @ok="vdata.tryDialogVisible = false"
    >
      <div style="text-align: center;">
        <p>盲盒抽奖</p>
        <img alt="example" src="./qr.png" :width="200">
      </div>
    </a-modal>

    <a-modal
      v-model:visible="vdata.createDialogVisible"
      title="活动简介"
      centered
      width="50%"
      okText="创建活动"
      @ok="onCreate"
    >
      <div style="display: flex; flex-direction:row">
        <img alt="example" src="./1.png" :width="300">
        <div style="margin-left: 20px; flex-grow: 1;">
          <div style="text-align: center;">
            <p>盲盒抽奖</p>
            <img alt="example" src="./qr.png" :width="140">
          </div>
      
          <p style="font-weight: bolder;">玩法介绍</p>
          <span>1.扫码关注<br>2.点击报名<br>3.准时参加</span>
          <p />
          <p style="font-weight: bolder;">活动标签</p>
          <a-tag color="green">抽奖</a-tag>
          <a-tag color="green">商家活动</a-tag>
          <a-tag color="green">鼓励金</a-tag>
        </div>
      </div>
    </a-modal>

    <!-- 新增页面组件  -->
    <AddOrEditFull ref="AddOrEditRef" @change="onRefresh" />
  </page-header-wrapper>
</template>
<script setup lang="ts">

// import { API_URL_MCH_LIST, req, reqLoad } from '@/api/manage'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import AddOrEditFull from './AddOrEdit.vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties
const AddOrEditRef = ref()

const vdata = reactive({
  searchData: { type: '0' },
  resultData: {},
  tryDialogVisible:false,
  createDialogVisible:false
})

/**
 * 搜索
 */
function onSearch(searchValue: string){
 
}

/**
 * 试用
 */
 function onTry(recordId: string){
  vdata.tryDialogVisible = true
}

/**
 * 展示
 */
 function onShow(recordId: string){
  vdata.createDialogVisible = true
}

/**
 * 创建
 */
 function onCreate(){
  vdata.createDialogVisible = false
  AddOrEditRef.value.show()
}


/**
 * 刷新
 */
 function onRefresh(){
  
}

</script>
<style scoped lang="less">
.body {
  padding: 20px;
}

.head{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>